<template>
    <div>
        <a-card class="searchForm mb-twelve">
            <a-form-model :model="searchForm" layout="inline" :colon="false">
                <a-form-model-item label="模糊搜索"  prop="ruleName">
                    <a-input  v-model="searchForm.ruleName" placeholder="请输入关键字搜索" />
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="search" type="primary">查询</a-button>
                    <a-button @click="reset" class="btn-reset">重置</a-button>
                </a-form-model-item>
            </a-form-model>
        </a-card>
        <a-card>
            <div class="flex align-center justify-between flex-wrap card-hr">
                <div class="a-card-title">规则列表</div>
                <div>
                    <a-button type="danger" @click="del(null)" class="btn-danger">批量删除</a-button>
                    <a-button @click="handleOpen('')" type="primary" style="margin-left: 8px;">添加</a-button>
                </div>
            </div>
            <div class="mb-sixteen">
                <a-table bordered :rowKey="(record, index) => {
                return index;
            }
                " :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
                    :data-source="list" :loading="loading" :pagination="false" :scroll="{ x: '100%' }">
                    <template slot="action" slot-scope="text,record">
                        <a-button @click="handleOpen(record)" type="link"> 编辑规则 </a-button>
                        <a-button  @click="del(record)" type="link" style="color: #F64646;"> 删除 </a-button>
                        <a-button @click="forbidden(record)" type="link" style="color: #F64646;"> 禁用 </a-button>
                    </template>
                </a-table>

            </div>
            <div class="text-right" v-if="total > 0">
                <a-pagination :total="total" :current="searchForm.page" :page-size.sync="searchForm.pageSize"
                    :page-size-options="$pageSizeOptions" @change="handlePageNo" @showSizeChange="showSizeChange"
                    show-size-changer />
            </div>
        </a-card>

        <a-modal :title="title" v-model="visible" :maskClosable="false" :width="590" centered :footer="null">
            <div>
                <a-form-model ref="ruleForm" :model="form" :rules="rules" :colon="false" :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 16 }">
                    <a-form-model-item label="ID" prop="id">
                        <a-input v-model="form.id" placeholder="" disabled />
                    </a-form-model-item>
                    <a-form-model-item label="规则名称" prop="ruleName">
                        <a-input v-model="form.description" placeholder="请输入规则名称" />
                    </a-form-model-item>
                  <a-form-model-item label="触发条件" prop="triggerCondition"  >
					   <a-input v-model="form.upper_upper_value" placeholder="请修改触发条件" />
                   <!-- <a-select v-model="form.triggerCondition" placeholder="请选择触发条件3" allowClear style="width:100%">
                      <a-select-option v-for="(item, index) in 10" :value="item" :key="index">
                        {{ item }}
                      </a-select-option>
                    </a-select> -->
                  </a-form-model-item>
                    <a-form-model-item label="优先级" prop="priority">
                      <a-input type="number" v-model="form.priority" placeholder="请输入优先级" />
                    </a-form-model-item>
                    <a-form-model-item label="描述" prop="description">
                        <a-input v-model="form.description" placeholder="请输入描述" />
                    </a-form-model-item>
                  <a-form-model-item label="触发行为" prop="action">
                    <a-select v-model="form.action" placeholder="请选择触发行为" allowClear style="width:100%">
                      <a-select-option v-for="(item, index) in actionList" :value="item.id" :key="index">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                    <a-form-model-item label="状态" prop="onlineStatus">
                        <a-select v-model="form.onlineStatus" placeholder="请选择状态" allowClear style="width:100%">
                            <a-select-option v-for="(item, index) in statusList" :value="item.id" :key="index">
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>

                </a-form-model>
                <div class="flex align-center justify-center">
                    <a-button @click="visible=false"
                        style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px">取消</a-button>
                        <a-button @click="submit" type="primary">确定</a-button>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import {dataSource as ds} from "@/services";
 
import {getRules,updateRules} from "@/services/rule";

const columns = [
    {
        title: '规则名称',
        dataIndex: 'rule_code',
    },
    {
        title: '触发条件',
        dataIndex: 'parameter_id',
    },
    {
        title: '触发值',
        dataIndex: 'upper_upper_value',
    },
    {
        title: '行为',
        dataIndex: 'action',
    },
    {
        title: '优先级',
        dataIndex: 'sensor_id',
    },
    {
        title: '描述',
        dataIndex: 'description',
    },
    {
        title: '在线状态',
        dataIndex: 'onlineStatus',
    },
    {
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:220
    }
]
export default {
    name: "ruleEngine",
    data() {
        return {
            columns,
            list: [],
            selectedRowKeys: [],

            searchForm: {
                page: 1,
              pageSize: 15
            },
            total: 0,
            visible: false,
          loading: false,
            title: '添加规则',
            form: {
				id:'',
                sensor_id: '',
                name: '',
                condition: undefined,
                priority:undefined,
                describe:"",
				upper_upper_value:'',
                status:undefined
            },
          statusList:[{
            id:0,
            name:'离线'
          },{
            id:1,
            name:'在线'
          }],
          actionList:[{
            id:0,
            name:'短信'
          },{
            id:1,
            name:'邮件'
          }],
            rules: {
              // ruleName: [
              //       { required: true, message: '请输入规则名称', trigger: 'blur' },
              //   ],
              // triggerCondition: [
              //       { required: true, message: '请选择触发条件1', trigger: 'change' },
              //   ],
              // action:[
              //   { required: true, message: '请选择触发条件2', trigger: 'change' },
              //   ],
              // priority:[
              //   { required: true, message: '请选择状态', trigger: 'change' },
              //   ],
            }
        }
    },
  mounted() {
    this.getData();
  },
    methods: {
      //提交
      submit(){
        this.$refs.ruleForm.validate(valid => {
			console.log("valid"+valid)
          if (valid) {
			  console.log("valid1")
            if(this.title=='编辑规则'){
				console.log("valid2")
              updateRules(this.form).then(res => {
				   console.log(res);
				   this.visible=false;
				   this.$message.success('规则修改成功')
			  })//.catch(){}
              // ds.submitpost(this.form).then(res => {
              //   console.log(res);
              //   this.$message.success('提交成功')
              //   this.visible=false;
              //   this.getData()
              // })
            }else {
				console.log(1122)
              // ds.submitpost(this.form).then(res => {
              //   console.log(res)
              //   this.$message.success('提交成功')
              //   this.visible=false;
              //   this.getData()
              // })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      //禁用
      forbidden(row){
        let that=this;
        this.$confirm({
          content: '是否确定禁用',
          onOk() {
            ds.delpost({ id:row.id }).then(res => {
              console.log(res)
              that.$message.success('禁用成功');
              that.getData();
            })
          }
        });
      },
      //删除
      del(row){
        let that=this;
        let ids='';
        if(!row){
          if(this.selectedRowKeys.length){
            let list=[];
            for(let i in this.selectedRowKeys){
              list.push(this.selectedRowKeys[i].id)
            }
            ids=list.join(',')
          }else {
            that.$message.success('请选择删除项');
            return
          }
        }else {
          ids=row.id
        }

        this.$confirm({
          content: '是否确定删除',
          onOk() {
            ds.delpost({ ids:ids }).then(res => {
              console.log(res)
              that.$message.success('删除成功');
              that.getData();
            })
          }
        });
      },
      //搜索
      search(){
        this.searchForm.page=1;
        this.getData()
      },
      //重置
      reset(){
        this.searchForm={
          page: 1,
          pageSize: 15
        }
        this.getData()
      },
      getData() {
        // this.list=[]
        let data={
          pageNum: this.searchForm.page,
          pageSize: this.searchForm.pageSize
        }
        this.loading=true;
        getRules(data).then((res) => {
          this.loading=false;
          this.list = res.rulesList
          this.total =Number(res.totalPages)*this.searchForm.pageSize
        }).catch(() => {

        });
      },
      handleOpen(row) {
        console.log(row)
        if(row){
          this.visible = true
          this.form =Object.assign({}, row);
          this.title = row ? '编辑规则' : '添加规则'
        }else {
          this.visible = true
          this.form={}
          this.title = row ? '编辑规则' : '添加规则'
        }

      },
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        showSizeChange(current, pageSize) {
            this.searchForm.pageSize = pageSize
          this.getData()
        },
        handlePageNo(current) {
            this.searchForm.page = current
          this.getData()
        },
    }
}
</script>
<style scoped lang="less">
/deep/.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/ .ant-pagination-item {
    background-color: #42487A;
    border-color: #999da0;

}

/deep/ .ant-pagination-item a {
    color: #898a94;
}

/deep/ .ant-pagination-item-active {
    border-color: #fff;
}

/deep/ .ant-pagination-item-active a {
    color: #fff;
}

/deep/ .ant-select-selection {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}
</style>
